Skip to content

[EuiDataGrid][A11y] Add contextual aria-label to column selector drag handle #9282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mgadewoll merged 2 commits into from
Jan 13, 2026
Merged

[EuiDataGrid][A11y] Add contextual aria-label to column selector drag handle #9282

mgadewoll merged 2 commits into from
Jan 13, 2026
+87 −76

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Dec 19, 2025 •
edited
Loading

Summary

closes #8516

This PR updates EuiDataGrid and improve the accessibility of the column selector drag handle buttons by ensuring that the buttons have individually distinguishable accessible labels by adding the column title to it as context.

// before
drag handle button

// after
{column_name} drag handle button
e.g. Account drag handle button

Why are we making this change?

:accessibility: Accessibility: Improve the accessibility of the drag handles by ensuring unique labels.

Screenshots #

Screenshot 2025-12-19 at 11 17 47
Screen.Recording.2025-12-19.at.11.17.02.mov

Impact to users

🟢 No updates required on consumer side.

ℹ️ Snapshots might require updates.

QA

  • test EuiDataGrid's column selector with screen readers and verify that each drag handle button has a distinct accessible label

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
    • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@mgadewoll mgadewoll self-assigned this Dec 19, 2025
@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 19, 2025

💚 Build Succeeded

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 19, 2025

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review December 19, 2025 13:04
@mgadewoll mgadewoll requested a review from a team as a code owner December 19, 2025 13:04
@acstll acstll self-requested a review December 19, 2025 13:37
@tkajtoch tkajtoch self-requested a review January 6, 2026 17:13
acstll
acstll approved these changes Jan 13, 2026
View reviewed changes
Copy link
Contributor

@acstll acstll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Code looks correct. Tested on Windows/NVDA and macOS/VoiceOver and it's working as expected. Dragging works as it used to. Thank you @mgadewoll!

@mgadewoll mgadewoll merged commit 6b8fa1d into elastic:main Jan 13, 2026
8 checks passed
@tkajtoch tkajtoch mentioned this pull request Jan 19, 2026
Merged
tkajtoch added a commit to elastic/kibana that referenced this pull request Jan 20, 2026
@tkajtoch
Update EUI to v112.0.0 (#249573)
17bcfb5 
## Dependency updates

- `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0`
- `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0`

---

## Package updates

### `@elastic/eui`
[v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0)

- Added `productDiscover` icon
([#9311](elastic/eui#9311))
- Updated `chartGauge` icon glyph
([#9311](elastic/eui#9311))
- Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash`
`faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit`
`fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity`
`inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash`
`lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify`
`mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge`
`minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested`
`number` `package` `paintBucket` `palette` `paperClip` `partial`
`pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot`
`plusCircle` `plusSquare` `plus` `popper` `presentation` `processor`
`productStreamsWired` `queryField` `queryOperand` `querySelector`
`queryValue` `query` `question` `quote` `radar` `readOnly` `redo`
`reporter` `return` `rocket` `scissors` `send` `shard` `share`
`snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop`
`sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft`
`textAlignRight` `textBold` `textHeading` `textItalic` `textStrike`
`textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline`
`transitionLeftIn` `transitionLeftOut` `transitionTopIn`
`transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer`
`warningFill` `waypoint` `wifiSlash` `wifi`
([#9303](elastic/eui#9303))
 ([#9303](elastic/eui#9303))
- Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight`
`bulb` `cloud` `hourglass` `megaphone` `workflow`
([#9303](elastic/eui#9303))
- Added `headerVisibility` prop on `EuiDataGrid` to support rendering
the datagrid header element optionally
([#9281](elastic/eui#9281))
- Updated 244 icon definitions to a more consistent naming convention.
All 100 renamed icons include a backward-compatible alias in the icon
map to support legacy references.
([#9279](elastic/eui#9279))
- Added icons `briefcase`, `productCloudInfra`, `productDashboard`,
`productML` ([#9301](elastic/eui#9301))
- Updated glyphs `bullseye`, `bolt`
([#9301](elastic/eui#9301))
- Added `dismissButtonProps` prop to `EuiCallOut`
([#9285](elastic/eui#9285))

**Bug fixes**

- Fixed `EuiFlyout` to properly forward refs when `session` prop is
used. ([#9318](elastic/eui#9318))
- Fixed `EuiDataGrid` cells scrolling into view while trying to select
text ([#9276](elastic/eui#9276))

**Breaking changes**

- Removed `euiPaletteForLightBackground` and
`euiPaletteForDarkBackground` deprecated palette functions. Use
`euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead.
([#9296](elastic/eui#9296))

**Accessibility**

- Improved the accessibility of `EuiDataGrid`s column selector drag
handle buttons by ensuring distinctive labels
([#9282](elastic/eui#9282))

### `@elastic/eslint-plugin-eui` v2.7.0

- Added `no-static-z-index` rule
([#9236](elastic/eui#9236))
dennis-tismenko pushed a commit to dennis-tismenko/kibana that referenced this pull request Jan 22, 2026
@tkajtoch @dennis-tismenko
Update EUI to v112.0.0 (elastic#249573)
ff5ae95 
## Dependency updates

- `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0`
- `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0`

---

## Package updates

### `@elastic/eui`
[v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0)

- Added `productDiscover` icon
([elastic#9311](elastic/eui#9311))
- Updated `chartGauge` icon glyph
([elastic#9311](elastic/eui#9311))
- Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash`
`faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit`
`fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity`
`inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash`
`lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify`
`mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge`
`minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested`
`number` `package` `paintBucket` `palette` `paperClip` `partial`
`pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot`
`plusCircle` `plusSquare` `plus` `popper` `presentation` `processor`
`productStreamsWired` `queryField` `queryOperand` `querySelector`
`queryValue` `query` `question` `quote` `radar` `readOnly` `redo`
`reporter` `return` `rocket` `scissors` `send` `shard` `share`
`snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop`
`sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft`
`textAlignRight` `textBold` `textHeading` `textItalic` `textStrike`
`textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline`
`transitionLeftIn` `transitionLeftOut` `transitionTopIn`
`transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer`
`warningFill` `waypoint` `wifiSlash` `wifi`
([elastic#9303](elastic/eui#9303))
 ([elastic#9303](elastic/eui#9303))
- Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight`
`bulb` `cloud` `hourglass` `megaphone` `workflow`
([elastic#9303](elastic/eui#9303))
- Added `headerVisibility` prop on `EuiDataGrid` to support rendering
the datagrid header element optionally
([elastic#9281](elastic/eui#9281))
- Updated 244 icon definitions to a more consistent naming convention.
All 100 renamed icons include a backward-compatible alias in the icon
map to support legacy references.
([elastic#9279](elastic/eui#9279))
- Added icons `briefcase`, `productCloudInfra`, `productDashboard`,
`productML` ([elastic#9301](elastic/eui#9301))
- Updated glyphs `bullseye`, `bolt`
([elastic#9301](elastic/eui#9301))
- Added `dismissButtonProps` prop to `EuiCallOut`
([elastic#9285](elastic/eui#9285))

**Bug fixes**

- Fixed `EuiFlyout` to properly forward refs when `session` prop is
used. ([elastic#9318](elastic/eui#9318))
- Fixed `EuiDataGrid` cells scrolling into view while trying to select
text ([elastic#9276](elastic/eui#9276))

**Breaking changes**

- Removed `euiPaletteForLightBackground` and
`euiPaletteForDarkBackground` deprecated palette functions. Use
`euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead.
([elastic#9296](elastic/eui#9296))

**Accessibility**

- Improved the accessibility of `EuiDataGrid`s column selector drag
handle buttons by ensuring distinctive labels
([elastic#9282](elastic/eui#9282))

### `@elastic/eslint-plugin-eui` v2.7.0

- Added `no-static-z-index` rule
([elastic#9236](elastic/eui#9236))
weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026
@mgadewoll @weronikaolejniczak
[EuiDataGrid][A11y] Add contextual aria-label to column selector dr…
922ff15 
…ag handle (elastic#9282)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@acstll acstll acstll approved these changes

@tkajtoch tkajtoch Awaiting requested review from tkajtoch

Assignees

@mgadewoll mgadewoll

Labels

accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiDataGrid][A11y] Provide contextual aria-label to column selector draggable button

3 participants

@mgadewoll @elasticmachine @acstll